Реактивність даних у Vue.js дозволяє змінювати дані в компоненті там де вони використовуються.
Для прикладу створимо компонент з двома елементами input і label.
Створимо властивість text у data. В input за допомогою директиви v-model робимо прив'язку до text. В елементі label вкажемо {{text}}.
Розглянемо як будуть змінюватися дані:
<div id="test">
<input v-model="text"> <label>{{text}}</label>
</div>
var app=new Vue({
el:'#test',
data:{
text:'тест'}
});
app.text='змінені дані'; //дані можна змінити тут
Даний приклад показує як рективно змінюються дані в компоненті. Реативність даних широко застосовується у Vue.js.
Це дозволяє при меншому коді писати компоненти для веб-сайту.
Така реактивність даних у Vue.js досягається за допомогою get i set у методі Object.defineProperty()
Vue.js автоматично налаштовує реактивність коли створюється властивість у data, обчислюється властивість, прив'язується і т.п.